<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1" />
		<meta name="keywords" content=""/>
		<meta name="description" content=""/>
		<!--<link rel="icon" href="favicon.ico" type="image/x-icon" />-->
		<!--<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />-->
		<!--my css-->
		<style type="text/css" data-type = "">
			html, body {
				margin: 0;
				padding: 0;
				height: 100%;
				background-image: url(http://ww1.sinaimg.cn/mw690/610dc034jw1ec1n7u89baj203i0293ya.jpg);
				background-color: #e6e6e6;
				font: 14px/1.5 "Microsoft YaHei", Helvetia, "lucida Grande", Verdana, Arial
			}

			::selection {
				background: #575a60;
				color: #fff;
				text-shadow: none;
			}
			a {
				color: #515567;
				text-decoration: none;
				text-shadow: 0 2px 0 #ffffff;
			}
			a:hover {
				/* color: #21759b; */
				color: #ef0000;
			}

			li {
				list-style: none;
				text-align: left;
				line-height: 40px;
				width:500px;
			}
			#outer {
				position: relative;
				width: 100%;
				top: 29%;
			}

			#box {
				margin: 0 auto;
				font-size: 25px;
			}

			#box > ul {
				width: 500px;
				margin: 0 auto;
			}

			#social {
				width: 60%;
				margin: 0 auto;
			}

			@media screen and (max-width: 480px) {
				/*IPhone portrait and smaller. You can probably stop on 320px*/
				#social ul li {
					float: left;
					width: 35px;
				}
			}

		</style>
		<!--tipsy.css-->
		<style type="text/css">
			.tipsy {
				font-size: 10px;
				position: absolute;
				padding: 5px;
				z-index: 100000;
			}
			.tipsy-inner {
				background-color: #333;
				color: #FFF;
				max-width: 200px;
				padding: 5px 8px 4px 8px;
				text-align: center;
			}

			/* Rounded corners */
			.tipsy-inner {
				border-radius: 3px;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
			}

			/* Uncomment for shadow */
			/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/

			.tipsy-arrow {
				position: absolute;
				width: 0;
				height: 0;
				line-height: 0;
				border: 5px dashed #000;
			}

			/* Rules to colour arrows */
			.tipsy-arrow-n {
				border-bottom-color: #333;
			}
			.tipsy-arrow-s {
				border-top-color: #333;
			}
			.tipsy-arrow-e {
				border-left-color: #333;
			}
			.tipsy-arrow-w {
				border-right-color: #333;
			}

			.tipsy-n .tipsy-arrow {
				top: 0px;
				left: 50%;
				margin-left: -5px;
				border-bottom-style: solid;
				border-top: none;
				border-left-color: transparent;
				border-right-color: transparent;
			}
			.tipsy-nw .tipsy-arrow {
				top: 0;
				left: 10px;
				border-bottom-style: solid;
				border-top: none;
				border-left-color: transparent;
				border-right-color: transparent;
			}
			.tipsy-ne .tipsy-arrow {
				top: 0;
				right: 10px;
				border-bottom-style: solid;
				border-top: none;
				border-left-color: transparent;
				border-right-color: transparent;
			}
			.tipsy-s .tipsy-arrow {
				bottom: 0;
				left: 50%;
				margin-left: -5px;
				border-top-style: solid;
				border-bottom: none;
				border-left-color: transparent;
				border-right-color: transparent;
			}
			.tipsy-sw .tipsy-arrow {
				bottom: 0;
				left: 10px;
				border-top-style: solid;
				border-bottom: none;
				border-left-color: transparent;
				border-right-color: transparent;
			}
			.tipsy-se .tipsy-arrow {
				bottom: 0;
				right: 10px;
				border-top-style: solid;
				border-bottom: none;
				border-left-color: transparent;
				border-right-color: transparent;
			}
			.tipsy-e .tipsy-arrow {
				right: 0;
				top: 50%;
				margin-top: -5px;
				border-left-style: solid;
				border-right: none;
				border-top-color: transparent;
				border-bottom-color: transparent;
			}
			.tipsy-w .tipsy-arrow {
				left: 0;
				top: 50%;
				margin-top: -5px;
				border-right-style: solid;
				border-left: none;
				border-top-color: transparent;
				border-bottom-color: transparent;
			}

		</style>
		
		<script>
			var _hmt = _hmt || [];
			(function() {
			  var hm = document.createElement("script");
			  hm.src = "//hm.baidu.com/hm.js?fb1b9a7935a7c7f4d6a5fca61a05c023";
			  var s = document.getElementsByTagName("script")[0]; 
			  s.parentNode.insertBefore(hm, s);
			})();
		</script>

	</head>
	<body>
		<div id="outer">
			<div id="box">
				<ul>
					<li>
						<a rel="tipsy" onclick="_hmt.push(['_trackEvent', '页面点击', '博客'])" title="努力记录下我身边有意义的事情" href="http://blog.hi-hi.cn" target="_blank">
							博客
						</a>
					</li>
					<li>
						<a rel='tipsy' onclick="_hmt.push(['_trackEvent', '页面点击', 'GitHub'])" title="我是“菜鸟”,我要飞高" href="https://github.com/wangkechun" target="_blank">
							GitHub
						</a>
					</li>
					<li>
						<a rel='tipsy' onclick="_hmt.push(['_trackEvent', '页面点击', 'hnustoj外网映射地址'])" title="湖南科技大学程序设计在线评测系统" href="http://oj.hi-hi.cn/JudgeOnline/" target="_blank">
							hnustoj外网映射地址
						</a>
					</li>
					
					<li>
						<a rel='tipsy' onclick="_hmt.push(['_trackEvent', '页面点击', 'hnust课程设计外网映射地址'])" title="2013级数据结构课程设计" href="http://oj.hi-hi.cn/kcsj/" target="_blank">
							hnust课程设计外网映射地址
						</a>
					</li>

                    <li>
                        <a rel='tipsy' onclick="_hmt.push(['_trackEvent', '页面点击', '湖南科技大学成绩查询'])" title="可以用外网手机IE8哦." href="http://cj.hi-hi.cn" target="_blank">
                            湖南科技大学成绩查询
                        </a>
                    </li>

					<li>
						<a rel='tipsy' onclick="_hmt.push(['_trackEvent', '页面点击', 'AngularJS文档镜像'])" title="由于AngularJS官网不能访问,用七牛云储存做了个镜像,方便大家浏览" href="http://angularjs-doc.qiniudn.com/" target="_blank">
							AngularJS文档镜像
						</a>
					</li>
					<li>
						<a rel='tipsy' onclick="_hmt.push(['_trackEvent', '页面点击', 'golang文档镜像'])" title="由于golang官网不能访问,用七牛云储存做了个镜像,方便大家浏览" href="http://golang-doc.qiniudn.com/" target="_blank">
							golang文档镜像
						</a>
					</li>
					
					<li>
						<a rel='tipsy' onclick="_hmt.push(['_trackEvent', '页面点击', '关于我'])" title="湖南科技大学大学2012级本科生,2年acm经历,技能:python / javascript(bootstrap,angularjs,jquery,node) / php / golang / c " >
							关于我(王克纯)
						</a>
					</li>

					<li id="contact-me">
						<a>
							联系我
						</a>
					</li>
					
				</ul>
			</div>

		</div>

		<script src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
		<!--tipsy.js-->
		<script type="text/javascript" charset="utf-8">
			// tipsy, facebook style tooltips for jquery
			// version 1.0.0a
			// (c) 2008-2010 jason frame [jason@onehackoranother.com]
			// released under the MIT license

			(function($) {

				function maybeCall(thing, ctx) {
					return ( typeof thing == 'function') ? (thing.call(ctx)) : thing;
				};

				function isElementInDOM(ele) {
					while ( ele = ele.parentNode) {
						if (ele == document)
							return true;
					}
					return false;
				};

				function Tipsy(element, options) {
					this.$element = $(element);
					this.options = options;
					this.enabled = true;
					this.fixTitle();
				};

				Tipsy.prototype = {
					show : function() {
						var title = this.getTitle();
						if (title && this.enabled) {
							var $tip = this.tip();

							$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
							$tip[0].className = 'tipsy';
							// reset classname in case of dynamic gravity
							$tip.remove().css({
								top : 0,
								left : 0,
								visibility : 'hidden',
								display : 'block'
							}).prependTo(document.body);

							var pos = $.extend({}, this.$element.offset(), {
								width : this.$element[0].offsetWidth,
								height : this.$element[0].offsetHeight
							});

							var actualWidth = $tip[0].offsetWidth, actualHeight = $tip[0].offsetHeight, gravity = maybeCall(this.options.gravity, this.$element[0]);

							var tp;
							switch (gravity.charAt(0)) {
								case 'n':
									tp = {
										top : pos.top + pos.height + this.options.offset,
										left : pos.left + pos.width / 2 - actualWidth / 2
									};
									break;
								case 's':
									tp = {
										top : pos.top - actualHeight - this.options.offset,
										left : pos.left + pos.width / 2 - actualWidth / 2
									};
									break;
								case 'e':
									tp = {
										top : pos.top + pos.height / 2 - actualHeight / 2,
										left : pos.left - actualWidth - this.options.offset
									};
									break;
								case 'w':
									tp = {
										top : pos.top + pos.height / 2 - actualHeight / 2,
										left : pos.left + pos.width + this.options.offset
									};
									break;
							}

							if (gravity.length == 2) {
								if (gravity.charAt(1) == 'w') {
									tp.left = pos.left + pos.width / 2 - 15;
								} else {
									tp.left = pos.left + pos.width / 2 - actualWidth + 15;
								}
							}

							$tip.css(tp).addClass('tipsy-' + gravity);
							$tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0);
							if (this.options.className) {
								$tip.addClass(maybeCall(this.options.className, this.$element[0]));
							}

							if (this.options.fade) {
								$tip.stop().css({
									opacity : 0,
									display : 'block',
									visibility : 'visible'
								}).animate({
									opacity : this.options.opacity
								});
							} else {
								$tip.css({
									visibility : 'visible',
									opacity : this.options.opacity
								});
							}
						}
					},

					hide : function() {
						if (this.options.fade) {
							this.tip().stop().fadeOut(function() {
								$(this).remove();
							});
						} else {
							this.tip().remove();
						}
					},

					fixTitle : function() {
						var $e = this.$element;
						if ($e.attr('title') || typeof ($e.attr('original-title')) != 'string') {
							$e.attr('original-title', $e.attr('title') || '').removeAttr('title');
						}
					},

					getTitle : function() {
						var title, $e = this.$element, o = this.options;
						this.fixTitle();
						var title, o = this.options;
						if ( typeof o.title == 'string') {
							title = $e.attr(o.title == 'title' ? 'original-title' : o.title);
						} else if ( typeof o.title == 'function') {
							title = o.title.call($e[0]);
						}
						title = ('' + title).replace(/(^\s*|\s*$)/, "");
						return title || o.fallback;
					},

					tip : function() {
						if (!this.$tip) {
							this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
							this.$tip.data('tipsy-pointee', this.$element[0]);
						}
						return this.$tip;
					},

					validate : function() {
						if (!this.$element[0].parentNode) {
							this.hide();
							this.$element = null;
							this.options = null;
						}
					},

					enable : function() {
						this.enabled = true;
					},
					disable : function() {
						this.enabled = false;
					},
					toggleEnabled : function() {
						this.enabled = !this.enabled;
					}
				};

				$.fn.tipsy = function(options) {

					if (options === true) {
						return this.data('tipsy');
					} else if ( typeof options == 'string') {
						var tipsy = this.data('tipsy');
						if (tipsy)
							tipsy[options]();
						return this;
					}

					options = $.extend({}, $.fn.tipsy.defaults, options);

					function get(ele) {
						var tipsy = $.data(ele, 'tipsy');
						if (!tipsy) {
							tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
							$.data(ele, 'tipsy', tipsy);
						}
						return tipsy;
					}

					function enter() {
						var tipsy = get(this);
						tipsy.hoverState = 'in';
						if (options.delayIn == 0) {
							tipsy.show();
						} else {
							tipsy.fixTitle();
							setTimeout(function() {
								if (tipsy.hoverState == 'in')
									tipsy.show();
							}, options.delayIn);
						}
					};

					function leave() {
						var tipsy = get(this);
						tipsy.hoverState = 'out';
						if (options.delayOut == 0) {
							tipsy.hide();
						} else {
							setTimeout(function() {
								if (tipsy.hoverState == 'out')
									tipsy.hide();
							}, options.delayOut);
						}
					};

					if (!options.live)
						this.each(function() {
							get(this);
						});

					if (options.trigger != 'manual') {
						var binder = options.live ? 'live' : 'bind', eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus', eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
						this[binder](eventIn, enter)[binder](eventOut, leave);
					}

					return this;

				};

				$.fn.tipsy.defaults = {
					className : null,
					delayIn : 0,
					delayOut : 0,
					fade : false,
					fallback : '',
					gravity : 'n',
					html : false,
					live : false,
					offset : 0,
					opacity : 0.8,
					title : 'title',
					trigger : 'hover'
				};

				$.fn.tipsy.revalidate = function() {
					$('.tipsy').each(function() {
						var pointee = $.data(this, 'tipsy-pointee');
						if (!pointee || !isElementInDOM(pointee)) {
							$(this).remove();
						}
					});
				};

				// Overwrite this method to provide options on a per-element basis.
				// For example, you could store the gravity in a 'tipsy-gravity' attribute:
				// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
				// (remember - do not modify 'options' in place!)
				$.fn.tipsy.elementOptions = function(ele, options) {
					return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
				};

				$.fn.tipsy.autoNS = function() {
					return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
				};

				$.fn.tipsy.autoWE = function() {
					return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
				};

				/**
				 * yields a closure of the supplied parameters, producing a function that takes
				 * no arguments and is suitable for use as an autogravity function like so:
				 *
				 * @param margin (int) - distance from the viewable region edge that an
				 *        element should be before setting its tooltip's gravity to be away
				 *        from that edge.
				 * @param prefer (string, e.g. 'n', 'sw', 'w') - the direction to prefer
				 *        if there are no viewable region edges effecting the tooltip's
				 *        gravity. It will try to vary from this minimally, for example,
				 *        if 'sw' is preferred and an element is near the right viewable
				 *        region edge, but not the top edge, it will set the gravity for
				 *        that element's tooltip to be 'se', preserving the southern
				 *        component.
				 */
				$.fn.tipsy.autoBounds = function(margin, prefer) {
					return function() {
						var dir = {
							ns : prefer[0],
							ew : (prefer.length > 1 ? prefer[1] : false)
						}, boundTop = $(document).scrollTop() + margin, boundLeft = $(document).scrollLeft() + margin, $this = $(this);

						if ($this.offset().top < boundTop)
							dir.ns = 'n';
						if ($this.offset().left < boundLeft)
							dir.ew = 'w';
						if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin)
							dir.ew = 'e';
						if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin)
							dir.ns = 's';

						return dir.ns + (dir.ew ? dir.ew : '');
					}
				};

			})(jQuery);

		</script>

		<script type='text/javascript'>
			$(function() {
				$('a[rel=tipsy]').tipsy({
					fade : true,
					gravity : 'e'
				});
			});
			$("#contact-me").click(function(){
				$("#contact-me").text("QQ:978750903  邮箱:hi@"+"hi-hi.cn").unbind("click")
				_hmt.push(['_trackEvent', "页面点击", "关于我", opt_label, opt_value]);
			})

			
		</script>
	</body>
</html>
